<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
  column: Object,
  searchParam: {
    type: Object,
    default: () => ({})
  },
  enumMap: Map
})
const emit = defineEmits(['updata:searchParam'])

const currentVal = ref(props.searchParam[props.column.prop])
watch(() => props.searchParam, newVal => {
  currentVal.value = newVal[props.column.prop]
})
watch(currentVal, newVal => {
  const newParam = Object.assign(props.searchParam, { [props.column.prop]: newVal })
  emit('updata:searchParam', newParam)
})

const columnEnum = computed(() => {
  const data = props.enumMap.get(props.column.prop)
  return data || []
})

const fieldNames = {
  label: props.column?.fieldNames?.label || 'label',
  value: props.column?.fieldNames?.value || 'value',
}

const change = props.column.search?.props?.change || (() => {})
const visibleChange = props.column.search?.props?.visibleChange || (() => {})
const removeTag = props.column.search?.props?.removeTag || (() => {})
const clear = props.column.search?.props?.clear || (() => {})
const blur = props.column.search?.props?.blur || (() => {})
const focus = props.column.search?.props?.focus || (() => {})
const expandChange = props.column.search?.props?.expandChange || (() => {})
</script>

<template>
  <component
    :is="`el-${column.search?.el}`"
    v-if="column.search?.el"
    v-bind="column.search.props"
    v-model="currentVal"
    :options="columnEnum"
    @change="change"
    @visible-change="visibleChange"
    @remove-tag="removeTag"
    @clear="clear"
    @blur="blur"
    @focus="focus"
    @expand-change="expandChange"
  >
    <template v-if="column.search?.el === 'select'">
      <el-option
        v-for="item in columnEnum"
        :key="item[fieldNames.value]"
        :label="item[fieldNames.label]"
        :value="item[fieldNames.value]">
      </el-option>
    </template>
  </component>
</template>

<style lang="scss" scoped>
.el-select, .el-cascader, .el-date-editor{
  width: 100%;
}
</style>
